<template>
  <div class="tops">
    <div class="top">
      <div v-for="(item, index) in json.ppt.maxNum" :key="index">
        <!-- <el-button @click="pptnums(index)"> -->
        <div class="mincarvas" ref="mincarvas">
          <div class="carvas" ref="carvas">
            <!--ppt -->
            <vue-draggable-resizable
              v-show="json.ppt.pages[index].img"
              :draggable="false"
              :resizable="false"
              :x="json.scene.pptX / 4"
              :y="json.scene.pptY / 4"
              :w="json.scene.pptWidth / 4"
              :h="json.scene.pptHeight / 4"
            >
              <el-image
                :src="url + json.ppt.pages[index].img"
                class="imges"
              ></el-image>
            </vue-draggable-resizable>
            <!--人物 -->
            <vue-draggable-resizable
              v-show="json.character.staticImg"
              :draggable="false"
              :resizable="false"
              :x="json.character.X / 4"
              :y="json.character.Y / 4"
              :w="json.character.width / 4"
              :h="json.character.height / 4"
            >
              <el-image
                :src="url + json.character.staticImg"
                class="imges"
              ></el-image>
            </vue-draggable-resizable>
          </div>
        </div>
        <!-- </el-button> -->
      </div>
    </div>
    <!-- <div>
      <el-button type="primary" class="button" @click="scenlistadd"
        >添加场景</el-button
      >
    </div> -->
  </div>
</template>

<script>
export default {
  name: "SceneList",
  props: {
    backflag: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      url: this.$store.getters["url/urls"],
      backgrouncolor: this.$store.getters["virtualhuman/backgr"], // 背景图片
      json: this.$store.getters["virtualhuman/json"], //拿到ppt列表
    };
  },
  watch: {
    backflag: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.creag();
          this.$emit("backflags", false);
        }
      },
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.creag();
    });
  },
  updated: function () {
    this.$nextTick(function () {
      //  仅在整个视图都被重新渲染之后才会运行的代码
      this.creag();
    });
  },
  methods: {
    creag() {
      //让背景同步
      this.backgrouncolor = this.$store.getters["virtualhuman/backgr"];
      const bag = this.$refs.mincarvas; //获取dom节点
      bag.forEach((item) => {
        item.style.backgroundImage = `url(${this.url + this.backgrouncolor})`;
      });
    },
    scenlistadd() {
      //点击添加场景
      this.$store.commit("virtualhuman/PPTLISTADD");
      // this.json = this.$store.getters["virtualhuman/json"];
    },
    pptnums(num) {
      //看看它点了哪个场景
      this.$emit("pptnum", num);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
 width: 100%;
  height: 500px;
  overflow-y: auto;
  position: relative;
  .mincarvas {
    width: 240px;
    height: 135px;
    border: 1px solid #000;
    z-index: 0;
    background-size: 100% 100%;
  }
  .imges {
    width: 100%;
    height: 100%;
  }
}
.button {
  width: 100%;
}
</style>